<template>
	<el-row :gutter="40">
		<el-col v-if="!form.id">
			<el-empty
				description="请选择左侧菜单后操作"
				:image-size="100"
			></el-empty>
		</el-col>
		<template v-else>
			<el-col :lg="12">
				<h2>{{ form.meta.title || "新增菜单" }}</h2>
				<el-form
					:model="form"
					:rules="rules"
					ref="dialogForm"
					label-width="80px"
					label-position="left"
				>
					<el-form-item label="显示名称" prop="title">
						<el-input
							v-model="form.title"
							clearable
							placeholder="菜单显示名字"
						></el-input>
					</el-form-item>
					<el-form-item label="上级菜单" prop="parentId">
						<el-cascader
							v-model="form.pid"
							:options="menuOptions"
							:props="menuProps"
							:show-all-levels="false"
							placeholder="顶级菜单"
							clearable
							disabled
						></el-cascader>
					</el-form-item>
					<el-form-item label="类型" prop="type">
						<el-radio-group v-model="form.type">
							<el-radio-button label="menu">菜单</el-radio-button>
							<el-radio-button label="iframe"
								>Iframe</el-radio-button
							>
							<el-radio-button label="link">外链</el-radio-button>
							<el-radio-button label="button"
								>按钮</el-radio-button
							>
						</el-radio-group>
					</el-form-item>
<!--					<el-form-item label="别名" prop="name">-->
<!--						<el-input-->
<!--							v-model="form.name"-->
<!--							clearable-->
<!--							placeholder="菜单别名"-->
<!--						></el-input>-->
<!--						<div class="el-form-item-msg">-->
<!--							系统唯一且与内置组件名一致，否则导致缓存失效。如类型为Iframe的菜单，别名将代替源地址显示在地址栏-->
<!--						</div>-->
<!--					</el-form-item>-->
					<el-form-item label="菜单图标" prop="meta.icon">
						<sc-icon-select
							v-model="form.icon"
							clearable
						></sc-icon-select>
					</el-form-item>
					<el-form-item label="路由地址" prop="path">
						<el-input
							v-model="form.path"
							clearable
							placeholder=""
						></el-input>
					</el-form-item>
					<el-form-item label="重定向" prop="redirect">
						<el-input
							v-model="form.redirect"
							clearable
							placeholder=""
						></el-input>
					</el-form-item>
					<el-form-item label="菜单高亮" prop="active">
						<el-input
							v-model="form.active"
							clearable
							placeholder=""
						></el-input>
						<div class="el-form-item-msg">
							子节点或详情页需要高亮的上级菜单路由地址
						</div>
					</el-form-item>
					<el-form-item label="视图" prop="component">
						<el-input
							v-model="form.component"
							clearable
							placeholder=""
						>
							<template #prepend>views/</template>
						</el-input>
						<div class="el-form-item-msg">
							如父节点、链接或Iframe等没有视图的菜单不需要填写
						</div>
					</el-form-item>
					<el-form-item label="是否隐藏" prop="hidden">
						<el-radio-group v-model="form.hidden">
							<el-radio :label="1">是</el-radio>
							<el-radio :label="0">否</el-radio>
						</el-radio-group>
						<div class="el-form-item-msg" true-label="0" false-label="1" label="0">菜单不显示在导航中，但用户依然可以访问，例如详情页</div>
					</el-form-item>

<!--					<el-form-item label="是否停用" prop="status">-->
<!--						<el-radio-group v-model="form.status">-->
<!--							<el-radio label="0">启用</el-radio>-->
<!--							<el-radio label="1">停用</el-radio>-->
<!--						</el-radio-group>-->
<!--						<div class="el-form-item-msg" true-label="0" false-label="1" label="0">停用的菜单不会在导航中，也无法访问</div>-->
<!--					</el-form-item>-->

<!--					<el-form-item label="是否隐藏" prop="meta.hidden">-->
<!--						<el-checkbox v-model="form.hidden"-->
<!--							>隐藏菜单</el-checkbox-->
<!--						>-->
<!--						<el-checkbox v-model="form.hiddenBreadcrumb"-->
<!--							>隐藏面包屑</el-checkbox-->
<!--						>-->
<!--						<div class="el-form-item-msg">-->
<!--							菜单不显示在导航中，但用户依然可以访问，例如详情页-->
<!--						</div>-->
<!--					</el-form-item>-->
					<el-form-item>
						<el-button
							type="primary"
							@click="save"
							:loading="loading"
							>保 存</el-button
						>
					</el-form-item>
				</el-form>
			</el-col>
<!--			<el-col :lg="12" class="apilist">-->
<!--				<h2>接口权限</h2>-->
<!--				<sc-form-table-->
<!--					v-model="form.apiList"-->
<!--					:addTemplate="apiListAddTemplate"-->
<!--					placeholder="暂无匹配接口权限"-->
<!--				>-->
<!--					<el-table-column prop="code" label="标识" width="150">-->
<!--						<template #default="scope">-->
<!--							<el-input-->
<!--								v-model="scope.row.code"-->
<!--								placeholder="请输入内容"-->
<!--							></el-input>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--					<el-table-column prop="url" label="Api url">-->
<!--						<template #default="scope">-->
<!--							<el-input-->
<!--								v-model="scope.row.url"-->
<!--								placeholder="请输入内容"-->
<!--							></el-input>-->
<!--						</template>-->
<!--					</el-table-column>-->
<!--				</sc-form-table>-->
<!--			</el-col>-->
		</template>
	</el-row>
</template>

<script>
import scIconSelect from "@/components/scIconSelect";

export default {
	components: {
		scIconSelect,
	},
	props: {
		menu: { type: Object, default: () => {} },
	},
	data() {
		return {
			form: {
				id: "",
				parentId: "",
				name: "",
				path: "",
				component: "",
				redirect: "",
				title: "",
				icon: "",
				active: "",
				color: "",
				type: "menu",
				apiList: [],
			},
			menuOptions: [],
			menuProps: {
				value: "id",
				label: "title",
				checkStrictly: true,
			},
			predefineColors: [
				"#ff4500",
				"#ff8c00",
				"#ffd700",
				"#67C23A",
				"#00ced1",
				"#409EFF",
				"#c71585",
			],
			rules: [],
			apiListAddTemplate: {
				code: "",
				url: "",
			},
			loading: false,
		};
	},
	watch: {
		menu: {
			handler() {
				this.menuOptions = this.treeToMap(this.menu);
			},
			deep: true,
		},
	},
	mounted() {},
	methods: {
		//简单化菜单
		treeToMap(tree) {
			const map = [];
			tree.forEach((item) => {
				var obj = {
					id: item.id,
					parentId: item.pid,
					title: item.title,
					children:
						item.children && item.children.length > 0
							? this.treeToMap(item.children)
							: null,
				};
				map.push(obj);
			});
			return map;
		},
		//保存
		async save() {
			this.loading = true;
			var res = await this.$HTTP()
				.params(this.form)
				.post("/admin/menu/edit")
				.then((res) => {
					this.$message.success("保存成功");
				})
				.catch(() => {});
			this.loading = false;
		},
		//表单注入数据
		setData(data, pid) {
			this.form = data;
			this.form.parentId = pid;
		},
	},
};
</script>

<style scoped>
h2 {
	font-size: 17px;
	color: #3c4a54;
	padding: 0 0 30px 0;
}
.apilist {
	border-left: 1px solid #eee;
}

[data-theme="dark"] h2 {
	color: #fff;
}
[data-theme="dark"] .apilist {
	border-color: #434343;
}
</style>
